<script setup>
import { showFailToast, showToast } from 'vant';
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { setNewPasswordFn } from '@/api/login'; 

const route = useRoute()
const router = useRouter()
const password1 = ref('')
const password2 = ref('')
const checked1 = ref(false)
const checked2 = ref(false)
function tosetpassword() {
    if (password1.value == password2.value && password1.value) {
        setNewPasswordFn({
            tel: route.query.tel,
            password: password1.value
        }).then(res => {
            // console.log(res);
            showToast(res.message)
            router.push('/login')
        })
    } else {
        showFailToast('密码输入有误')
    }
}
</script>

<template>
    <div class="step">
        <span>1.手机号码验证</span>
        <span class="active">2.设置新密码</span>
    </div>
    <van-cell-group class="box">
        <van-field v-model="password1" :type="checked1 ? 'text' : 'password'" placeholder="6-16位字母和数字">
            <template #button>
                <van-switch v-model="checked1" />
            </template>
        </van-field>
        <van-field v-model="password2" :type="checked1 ? 'text' : 'password'" placeholder="再次输入新密码">
            <template #button>
                <van-switch v-model="checked2" />
            </template>
        </van-field>
    </van-cell-group>
    <div class="button">
        <van-button block round type="primary" @click="tosetpassword">完成</van-button>
    </div>
</template>

<style lang="scss" scoped>
.step {
    display: flex;
    justify-content: space-between;
    background-color: white;

    span {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
    }

    .active {
        color: #3a8cff;
    }

}

.box {
    margin-top: 10px;
}

.button {
    width: 335px;
    margin: 0 auto;
    margin-top: 10px;
}
</style>